<template>
  <div class="absolute top-0 left-0 w-full h-0 z-10 flex justify-between pt-1">
    <div class="pl-2">
      <ViewportCamera />

      <ViewportShading />
    </div>

    <div class="pr-2">
      <n-button-group size="small">
        <!--          <n-button :type="transfrom === 'translate' ? 'success' : 'default'" @click.stop="handlerRadioChange('translate')" round>-->
        <!--            <template #icon>-->
        <!--              <n-icon>-->
        <!--                <Cursor1 />-->
        <!--              </n-icon>-->
        <!--            </template>-->
        <!--          </n-button>-->
        <n-tooltip placement="bottom" trigger="hover">
          <template #trigger>
            <n-button
              :type="transfrom === 'translate' ? 'success' : 'default'"
              @click.stop="handlerRadioChange('translate')"
              round
            >
              <template #icon>
                <n-icon :size="16">
                  <Move />
                </n-icon>
              </template>
            </n-button>
          </template>
          <span>移动</span>
        </n-tooltip>
        <n-tooltip placement="bottom" trigger="hover">
          <template #trigger>
            <n-button
              :type="transfrom === 'rotate' ? 'success' : 'default'"
              @click.stop="handlerRadioChange('rotate')"
            >
              <template #icon>
                <n-icon :size="16">
                  <Renew />
                </n-icon>
              </template>
            </n-button>
          </template>
          <span>旋转</span>
        </n-tooltip>

        <n-tooltip placement="bottom" trigger="hover">
          <template #trigger>
            <n-button
              :type="transfrom === 'scale' ? 'success' : 'default'"
              @click.stop="handlerRadioChange('scale')"
              round
            >
              <template #icon>
                <n-icon :size="16">
                  <Minimize />
                </n-icon>
              </template>
            </n-button>
          </template>
          <span>缩放</span>
        </n-tooltip>
      </n-button-group>

      <n-tooltip placement="bottom" trigger="hover">
        <template #trigger>
          <n-button
            circle
            size="small"
            class="ml-10px c-#fff"
            @click.stop="handlerLocalChange"
          >
            <template #icon>
              <n-icon>
                <Chart3D v-if="localValue" />
                <Wikis v-else />
              </n-icon>
            </template>
          </n-button>
        </template>
        <span>
          {{ localValue ? "本地坐标" : "世界坐标" }}
        </span>
      </n-tooltip>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Cursor1, Move, Renew, Minimize, Wikis, Chart3D } from "@vicons/carbon";
import { useDispatchSignal } from "@/hooks/useSignal";
import ViewportCamera from "@/components/viewport/ViewportCamera.vue";
import ViewportShading from "@/components/viewport/ViewportShading.vue";
import { t } from "@/language";

const transfrom = ref("translate");
function handlerRadioChange(value) {
  transfrom.value = value;
  useDispatchSignal("transformModeChanged", value);
}

const localValue = ref(false);
function handlerLocalChange() {
  localValue.value = !localValue.value;
  useDispatchSignal("spaceChanged", localValue.value ? "local" : "world");
}
</script>

<style lang="less" scoped>
.n-button-group {
  .n-button {
    width: 32px;
    color: #fff;
  }
}
</style>
